<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增店铺')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-dealer-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">店铺名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺logo(140*140)：</label>
                <div class="col-sm-8">
                    <button type="button" class="layui-btn" id="upload_logo">上传图片</button>
                    <div class="layui-upload-list">
                        <input type="hidden" id="logoUrl" name="logo">
                        <p id="show_logo"></p>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主图(689*386)：</label>
                <div class="col-sm-8">
                    <button type="button" class="layui-btn" id="upload_main">上传图片</button>
                    <div class="layui-upload-list">
                        <input type="hidden" id="mainUrl" name="mainImg">
                        <p id="show_main"></p>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">店铺联系人：</label>
                <div class="col-sm-8">
                    <input name="contacts" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">店铺联系人电话：</label>
                <div class="col-sm-8">
                    <input name="contactsPhone" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">同一时最大预约数：</label>
                <div class="col-sm-8">
                    <input name="maxNum" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">地址：</label>
                <div class="col-sm-8">
                    <input name="address" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">选择坐标：</label>
                <div class="col-sm-8">
                    <button type="button" class="layui-btn" id="show_map" onclick="openMap()">打开地图</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺经度：</label>
                <div class="col-sm-8">
                    <input name="lng" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺维度：</label>
                <div class="col-sm-8">
                    <input name="lat" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺介绍：</label>
                <div class="col-sm-8">
                    <textarea name="introduce" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('dealer_status')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status"
                               th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">店铺开始预约时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="startAppointment" name="startAppointment" class="form-control" placeholder="hh:ii" type="text">
                        <input name="startAppointmentTime" type="hidden"/>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">店铺结束预约时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="endAppointment" name="endAppointment" class="form-control" placeholder="hh:ii" type="text">
                        <input name="endAppointmentTime" type="hidden"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">排序：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="sort" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/dealer"
        $("#form-dealer-add").validate({
            focusCleanup: true,
            rules:{
                maxNum:{
                    digits: true,
                    required: true
                }
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
                $("input[name='endAppointmentTime']").val(dateFormat("YYYY-mm-dd HH:MM:SS", $("#endAppointment").data("datetimepicker").getDate()))
                $("input[name='startAppointmentTime']").val(dateFormat("YYYY-mm-dd HH:MM:SS", $("#startAppointment").data("datetimepicker").getDate()))
                $.operate.save(prefix + "/add", $('#form-dealer-add').serialize());
            }
        }
        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(),        // 年
                "m+": (date.getMonth() + 1).toString(),     // 月
                "d+": date.getDate().toString(),            // 日
                "H+": date.getHours().toString(),           // 时
                "M+": date.getMinutes().toString(),         // 分
                "S+": date.getSeconds().toString()          // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }
        $("input[name='startAppointment']").datetimepicker({
            format: "hh:00",
            autoclose: true,
            minView: 1,
            startView: 1
        });

        $("input[name='endAppointment']").datetimepicker({
            format: "hh:00",
            autoclose: true,
            minView: 1,
            startView: 1
        });


        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            upload.render({
                elem: '#upload_logo'
                , url: ctx+'/common/upload' //改成您自己的上传接口
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("#show_logo").html("<img src='" + res.url + "' style='width:80px;height:80px;'>");
                    $("#logoUrl").val(res.url);
                }
            });

            //普通图片上传
            upload.render({
                elem: '#upload_main'
                , url: ctx+'/common/upload' //改成您自己的上传接口
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("#show_main").html("<img src='" + res.url + "' style='width:80px;height:80px;'>");
                    $("#mainUrl").val(res.url);
                }
            });
        })

        function show(lng,lat) {
            console.log(lng+"  xxxxx   "+lat)
            $("input[name='lng']").val(lng)
            $("input[name='lat']").val(lat)
        }

        function openMap() {
            layer.confirm('选择地址',{
                type:2,
                shift:1,
                shadeClose:true,
                btn:['确认','取消'],
                maxmin:true,
                area: ['100%', '100%'],
                shade: 0.4,
                content:'map',
                yes: function (index,layero) {
                    layer.close(index)
                },btn2: function (index,layero) {
                }
            })
        }

    </script>
</body>
</html>